<template>
  <a-card style="widows: 100%; height: 233px; margin-bottom: 10px">
    <a-row>
      <a-col :span="8">
        <div ref="chartContainer1" style="height: 233px" />
      </a-col>
      <a-col :span="8">
        <div ref="chartContainer2" style="height: 233px" />
      </a-col>
      <a-col :span="8">
        <div ref="chartContainer4" style="height: 233px" />
      </a-col>
    </a-row>
  </a-card>
</template>
  
  <script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { get_com_performance } from "@/api/index.js";
import * as echarts from "echarts";

const chartContainer1 = ref(null);
const chartContainer2 = ref(null);
const chartContainer4 = ref(null);
let myChart1 = null;
let myChart2 = null;
let myChart4 = null;

const state = reactive({
  cpu_use_percent: [],
  cpu_times_user: [],
  cpu_times_system: [],
  memory_used: [],
  memory_available: [],
  memory_use_percent: [],
  kbps_recv: [],
  kbps_sent: [],
  disk_percent: [],
  disk_used: [],
  disk_free: [],
  gpu_memoryUsed: [],
  gpu_temperature: [],
  gpu_percent: [],
  gpu_memoryFree: [],
  time: [],
  timer: null,
});

const user_id = ref(Number(localStorage.getItem("user_id")));

const get_computer_perf = () => {
  get_com_performance({ user_id: user_id.value })
    .then((res) => {
      if (res.code === 200) {
        state.cpu_use_percent.push(res.cpu.cpu_use_percent);
        state.cpu_times_user.push(res.cpu.cpu_times_user);
        state.cpu_times_system.push(res.cpu.cpu_times_system);

        state.memory_used.push(res.memory.memory_used);
        state.memory_available.push(res.memory.memory_available);
        state.memory_use_percent.push(res.memory.memory_use_percent);

        state.disk_percent.push(res.io.disk_percent);
        state.disk_used.push(res.io.disk_used);
        state.disk_free.push(res.io.disk_free);

        state.time.push(res.time);

        show_echarts_computer();
      }
    })
    .finally(() => {
      state.timer = setTimeout(get_computer_perf, 2000);
    });
};

// 渲染echarts图表
const show_echarts_computer = () => {
  if (myChart1) myChart1.dispose(); // 销毁已存在的实例
  if (myChart2) myChart2.dispose();
  if (myChart4) myChart4.dispose();

  myChart1 = echarts.init(chartContainer1.value);
  myChart2 = echarts.init(chartContainer2.value);
  myChart4 = echarts.init(chartContainer4.value);

  const options1 = {
    title: {
      text: "cpu(使用率，用户使用时长，系统使用时长)",
      textStyle: {
        fontSize: 12,
      },
    },
    tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
    xAxis: { type: "category", data: state.time },
    yAxis: { type: "value" },
    series: [
      { name: "CPU使用率%", data: state.cpu_use_percent, type: "line" },
      { name: "用户使用时长：小时", data: state.cpu_times_user, type: "line" },
      {
        name: "系统使用时长：小时",
        data: state.cpu_times_system,
        type: "line",
      },
    ],
  };
  myChart1.setOption(options1);
  window.addEventListener("resize", () => myChart1.resize());

  // 内存图表
  const options2 = {
    title: {
      text: "内存(使用率，空闲内存，已使用内存)",
      textStyle: {
        fontSize: 12,
      },
    },
    tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
    xAxis: { type: "category", data: state.time },
    yAxis: { type: "value" },
    series: [
      { name: "内存使用率%", data: state.memory_use_percent, type: "line" },
      { name: "空闲内存：GB", data: state.memory_available, type: "line" },
      { name: "已使用内存：GB", data: state.memory_used, type: "line" },
    ],
  };

  myChart2.setOption(options2);
  window.addEventListener("resize", () => myChart2.resize());

  // 磁盘IO图表
  const options4 = {
    title: {
      text: "磁盘IO(使用率，已使用磁盘空间，空闲磁盘空间)",
      textStyle: {
        fontSize: 12,
      },
    },
    tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
    xAxis: { type: "category", data: state.time },
    yAxis: { type: "value" },
    series: [
      { name: "磁盘使用率%", data: state.disk_percent, type: "line" },
      { name: "已使用磁盘空间：GB", data: state.disk_used, type: "line" },
      { name: "空闲磁盘空间：GB", data: state.disk_free, type: "line" },
    ],
  };
  myChart4.setOption(options4);
  window.addEventListener("resize", () => myChart4.resize());
};

onMounted(() => {
  get_computer_perf();
});

onBeforeUnmount(() => {
  clearTimeout(state.timer);
  if (myChart1) myChart1.dispose(); // 销毁图表实例
  if (myChart2) myChart2.dispose();
  if (myChart4) myChart4.dispose();
});
</script>
  
<style scoped>
</style>
  